---
title: Merkblokkie
image: /images/user-guide/tasks/tasks_header.png
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
</Frame>

Word gebruik wanneer 'n gebruiker verskeie waardes van verskeie opsies moet kies.

<Tabs>
<Tab title="Usage">

```jsx
import { Checkbox } from "twenty-ui/display";

export const MyComponent = () => {
  return (
    <Checkbox
      checked={true}
      indeterminate={false}
      onChange={() => console.log("onChange function fired")}
      onCheckedChange={() => console.log("onCheckedChange function fired")}
      variant="primary"
      size="small"
      shape="squared"
    />
  );
};
```

</Tab>
<Tab title="Props">

| Eienskappe          | Tipe       | Beskrywing                                                                                                                    |
| ------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
| geselekteer         | booleaanse | Dui aan of die merkblokkie gekies is                                                                                          |
| onbepaald           | booleaanse | Dui aan of die merkblokkie in 'n onbepaalde toestand is (nie gekies of nie gekies nie)                     |
| opVerandering       | funksie    | Die terugbel-funksie wat jy wil aktiveer wanneer die merkblokkie se toestand verander                                         |
| opGekiesVerandering | funksie    | Die terugbel-funksie wat jy wil aktiveer wanneer die `gekies` toestand verander                                               |
| variant             | string     | Die visuele styl variant van die blokkie. Opsies sluit in: `primêr`, `sekondêr`, en `tersiêr` |
| grootte             | string     | Die grootte van die merkblokkie. Het twee opsies: `klein` en `groot`                          |
| vorm                | string     | Die vorm van die merkblokkie. Het twee opsies: `vierkantig` en `gerond`                       |

</Tab>
</Tabs>
